<!DOCTYPE html>

<html dir="ltr" mozdisallowselectionprint>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
		<meta name="google" content="notranslate" />
		<title>PDF.js viewer</title>

		<link rel="stylesheet" href="./css/font-awesome.min.css" />
		<link rel="stylesheet" href="./css/styles.css" />
		<link rel="stylesheet" href="./css/viewer.css" />

		<link rel="resource" type="application/l10n" href="locale/locale.properties" />
		<script src="build/pdf.js"></script>

		<script src="js/viewer.js"></script>
		<script src="./js/jquery-3.3.1.min.js"></script>
		<script src="./js/fabric.js"></script>
		<script src="./js/annotate.js"></script>
		<!--script src="./js/vconsole.min.js"></script>
  <script>
    var vConsole = new VConsole();
  </script-->
	</head>

	<body tabindex="1">
		<div id="outerContainer">
			<div id="sidebarContainer">
				<div id="toolbarSidebar">
					<div id="toolbarSidebarLeft">
						<div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
							<button
								id="viewThumbnail"
								class="toolbarButton toggled"
								title="Show Thumbnails"
								tabindex="2"
								data-l10n-id="thumbs"
								role="radio"
								aria-checked="true"
								aria-controls="thumbnailView"
							>
								<span data-l10n-id="thumbs_label">Thumbnails</span>
							</button>
							<button
								id="viewOutline"
								class="toolbarButton"
								title="Show Document Outline (double-click to expand/collapse all items)"
								tabindex="3"
								data-l10n-id="document_outline"
								role="radio"
								aria-checked="false"
								aria-controls="outlineView"
							>
								<span data-l10n-id="document_outline_label">Document Outline</span>
							</button>
							<button
								id="viewAttachments"
								class="toolbarButton"
								title="Show Attachments"
								tabindex="4"
								data-l10n-id="attachments"
								role="radio"
								aria-checked="false"
								aria-controls="attachmentsView"
							>
								<span data-l10n-id="attachments_label">Attachments</span>
							</button>
							<button
								id="viewLayers"
								class="toolbarButton"
								title="Show Layers (double-click to reset all layers to the default state)"
								tabindex="5"
								data-l10n-id="layers"
								role="radio"
								aria-checked="false"
								aria-controls="layersView"
							>
								<span data-l10n-id="layers_label">Layers</span>
							</button>
						</div>
					</div>

					<div id="toolbarSidebarRight">
						<div id="outlineOptionsContainer" class="hidden">
							<div class="verticalToolbarSeparator"></div>

							<button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item" tabindex="6" data-l10n-id="current_outline_item">
								<span data-l10n-id="current_outline_item_label">Current Outline Item</span>
							</button>
						</div>
					</div>
				</div>
				<div id="sidebarContent">
					<div id="thumbnailView"></div>
					<div id="outlineView" class="hidden"></div>
					<div id="attachmentsView" class="hidden"></div>
					<div id="layersView" class="hidden"></div>
				</div>
				<div id="sidebarResizer"></div>
			</div>
			<!-- sidebarContainer -->

			<div id="mainContainer">
				<div class="findbar hidden doorHanger" id="findbar">
					<div id="findbarInputContainer">
						<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="find_input" aria-invalid="false" />
						<div class="splitToolbarButton">
							<button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
								<span data-l10n-id="find_previous_label">Previous</span>
							</button>
							<div class="splitToolbarButtonSeparator"></div>
							<button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
								<span data-l10n-id="find_next_label">Next</span>
							</button>
						</div>
					</div>

					<div id="findbarOptionsOneContainer">
						<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94" />
						<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight All</label>
						<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95" />
						<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match Case</label>
					</div>
					<div id="findbarOptionsTwoContainer">
						<input type="checkbox" id="findMatchDiacritics" class="toolbarField" tabindex="96" />
						<label for="findMatchDiacritics" class="toolbarLabel" data-l10n-id="find_match_diacritics_label">Match Diacritics</label>
						<input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="97" />
						<label for="findEntireWord" class="toolbarLabel" data-l10n-id="find_entire_word_label">Whole Words</label>
					</div>

					<div id="findbarMessageContainer" aria-live="polite">
						<span id="findResultsCount" class="toolbarLabel"></span>
						<span id="findMsg" class="toolbarLabel"></span>
					</div>
				</div>
				<!-- findbar -->

				<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
					<div id="secondaryToolbarButtonContainer">
						<button id="secondaryPresentationMode" class="secondaryToolbarButton visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
							<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
						</button>

						<button id="secondaryOpenFile" class="secondaryToolbarButton visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">
							<span data-l10n-id="open_file_label">Open</span>
						</button>

						<a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
							<span data-l10n-id="bookmark_label">Current View</span>
						</a>

						<div class="horizontalToolbarSeparator visibleLargeView"></div>

						<button id="firstPage" class="secondaryToolbarButton" title="Go to First Page" tabindex="56" data-l10n-id="first_page">
							<span data-l10n-id="first_page_label">Go to First Page</span>
						</button>
						<button id="lastPage" class="secondaryToolbarButton" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">
							<span data-l10n-id="last_page_label">Go to Last Page</span>
						</button>

						<div class="horizontalToolbarSeparator"></div>

						<div id="cursorToolButtons" role="radiogroup">
							<button
								id="cursorSelectTool"
								class="secondaryToolbarButton toggled"
								title="Enable Text Selection Tool"
								tabindex="60"
								data-l10n-id="cursor_text_select_tool"
								role="radio"
								aria-checked="true"
							>
								<span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
							</button>
							<button id="cursorHandTool" class="secondaryToolbarButton" title="Enable Hand Tool" tabindex="61" data-l10n-id="cursor_hand_tool" role="radio" aria-checked="false">
								<span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
							</button>
						</div>
					</div>
				</div>
				<!-- secondaryToolbar -->

				<div class="toolbar">
					<div id="toolbarContainer">
						<div id="toolbarViewer">
							<div id="toolbarViewerLeft">
								<button
									id="sidebarToggle"
									class="toolbarButton hiddenLargeView"
									title="Toggle Sidebar"
									tabindex="11"
									data-l10n-id="toggle_sidebar"
									aria-expanded="false"
									aria-controls="sidebarContainer"
								>
									<span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
								</button>
								<div class="toolbarButtonSpacer"></div>
								<button id="viewFind" class="toolbarButton hiddenLargeView" title="Find in Document" tabindex="12" data-l10n-id="findbar" aria-expanded="false" aria-controls="findbar">
									<span data-l10n-id="findbar_label">Find</span>
								</button>
								<div class="splitToolbarButton">
									<button class="toolbarButton" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
										<span data-l10n-id="previous_label">Previous</span>
									</button>
									<div class="splitToolbarButtonSeparator"></div>
									<button class="toolbarButton" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
										<span data-l10n-id="next_label">Next</span>
									</button>
								</div>
								<input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-id="page" autocomplete="off" />
								<span id="numPages" class="toolbarLabel"></span>
							</div>
							<div id="toolbarViewerRight">
								<button id="presentationMode" class="toolbarButton hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
									<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
								</button>

								<button id="openFile" class="toolbarButton hiddenSmallView" title="Open File" tabindex="32" data-l10n-id="open_file">
									<span data-l10n-id="open_file_label">Open</span>
								</button>

								<a href="#" id="viewBookmark" class="toolbarButton hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
									<span data-l10n-id="bookmark_label">Current View</span>
								</a>

								<div class="verticalToolbarSeparator hiddenSmallView"></div>

								<button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools" aria-expanded="false" aria-controls="secondaryToolbar">
									<span data-l10n-id="tools_label">Tools</span>
								</button>
							</div>
							<div id="toolbarViewerMiddle">
								<div class="splitToolbarButton">
									<button id="zoomOut" class="toolbarButton" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
										<span data-l10n-id="zoom_out_label">Zoom Out</span>
									</button>
									<div class="splitToolbarButtonSeparator"></div>
									<button id="zoomIn" class="toolbarButton" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
										<span data-l10n-id="zoom_in_label">Zoom In</span>
									</button>
								</div>
								<span id="scaleSelectContainer" class="dropdownToolbarButton">
									<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
										<option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto"> Automatic Zoom </option>
										<option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual"> Actual Size </option>
										<option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit"> Page Fit </option>
										<option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width"> Page Width </option>
										<option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>
										<option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'> 50% </option>
										<option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'> 75% </option>
										<option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'> 100% </option>
										<option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'> 125% </option>
										<option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'> 150% </option>
										<option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'> 200% </option>
										<option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'> 300% </option>
									</select>
								</span>
							</div>
						</div>
						<div id="loadingBar">
							<div class="progress">
								<div class="glimmer"></div>
							</div>
						</div>
					</div>

					<div class="tool-separate"></div>

					<div class="tool">
						<label for="">线条</label>
						<input type="number" value="1" id="brush-size" max="50" min="1" />
					</div>
					<div class="tool-separate"></div>
					<div class="tool">
						<label for=""></label>
						<div class="toolbar-button-drop-button" title="颜色"></div>
						<div class="color-plate">
							<div class="color-plate-item" style="background-color: #000000" title="#000000"></div>
							<div class="color-plate-item" style="background-color: #ef4437" title="#EF4437"></div>
							<div class="color-plate-item" style="background-color: #e71f63" title="#E71F63"></div>
							<div class="color-plate-item" style="background-color: #8f3e97" title="#8F3E97"></div>

							<div class="color-plate-item" style="background-color: #65499d" title="#65499D"></div>
							<div class="color-plate-item" style="background-color: #4554a4" title="#4554A4"></div>
							<div class="color-plate-item" style="background-color: #2083c5" title="#2083C5"></div>
							<div class="color-plate-item" style="background-color: #35a4dc" title="#35A4DC"></div>

							<div class="color-plate-item" style="background-color: #09bcd3" title="#09BCD3"></div>
							<div class="color-plate-item" style="background-color: #009688" title="#009688"></div>
							<div class="color-plate-item" style="background-color: #43a047" title="#43A047"></div>
							<div class="color-plate-item" style="background-color: #8bc34a" title="#8BC34A"></div>

							<div class="color-plate-item" style="background-color: #fdc010" title="#FDC010"></div>
							<div class="color-plate-item" style="background-color: #f8971c" title="#F8971C"></div>
							<div class="color-plate-item" style="background-color: #f0592b" title="#F0592B"></div>
							<div class="color-plate-item" style="background-color: #f06291" title="#F06291"></div>
						</div>
					</div>
					<div class="tool-separate"></div>
					<div class="tool">
						<label for="">字体</label>
						<select id="font-size">
							<option value="10">10</option>
							<option value="12">12</option>
							<option value="16" selected>16</option>
							<option value="18">18</option>
							<option value="24">24</option>
							<option value="32">32</option>
							<option value="48">48</option>
							<option value="64">64</option>
							<option value="72">72</option>
							<option value="108">108</option>
						</select>
					</div>
					<div class="tool-separate"></div>
					<div class="tool">
						<button class="tool-button active" onclick="enableSelector(event)" id="toolButtonHand">
							<i class="fa fa-hand-paper-o" title="手柄"></i>
						</button>
					</div>
					<div class="tool">
						<button class="tool-button" onclick="enablePencil(event)">
							<i class="fa fa-pencil" title="画笔"></i>
						</button>
					</div>
					<div class="tool">
						<button class="tool-button" onclick="enableAddText(event)">
							<i class="fa fa-font" title="添加文字"></i>
						</button>
					</div>
					<div class="tool">
						<button class="tool-button" onclick="enableRectangle(event)">
							<i class="fa fa-square-o" title="添加矩形"></i>
						</button>
					</div>
					<div class="tool">
						<button class="tool-button" onclick="enableCircle(event)">
							<i class="fa fa-circle-o" title="添加圆形"></i>
						</button>
					</div>
					<div class="tool">
						<button class="tool-button" onclick="enableLead(event)">
							<i class="fa fa-thumb-tack" title="添加引线"></i>
						</button>
					</div>
					<!-- 暂时去掉图片 -->
					<!-- <div class="tool">
                        <button class="tool-button" onclick="addImage(event)">
                            <i class="fa fa-picture-o" title="添加图片"></i>
                        </button>
                    </div> -->
					<div class="tool">
						<button class="tool-button" id="undoButton" onclick="undo(event)">
							<i class="fa fa-undo" title="撤销"></i>
						</button>
					</div>
					<div class="tool">
						<button class="tool-button" id="redoButton" onclick="redo(event)">
							<i class="fa fa-repeat" title="恢复撤销"></i>
						</button>
					</div>
				</div>

				<div id="viewerContainer" tabindex="0">
					<div id="viewer" class="pdfViewer"></div>
				</div>

				<div id="errorWrapper" hidden="true">
					<div id="errorMessageLeft">
						<span id="errorMessage"></span>
						<button id="errorShowMore" data-l10n-id="error_more_info"> More Information </button>
						<button id="errorShowLess" data-l10n-id="error_less_info" hidden="true"> Less Information </button>
					</div>
					<div id="errorMessageRight">
						<button id="errorClose" data-l10n-id="error_close"> Close </button>
					</div>
					<div id="errorSpacer"></div>
					<textarea id="errorMoreInfo" hidden="true" readonly="readonly"></textarea>
				</div>
			</div>
			<!-- mainContainer -->

			<div id="dialogContainer">
				<dialog id="passwordDialog">
					<div class="row">
						<label for="password" id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</label>
					</div>
					<div class="row">
						<input type="password" id="password" class="toolbarField" />
					</div>
					<div class="buttonRow">
						<button id="passwordCancel" class="dialogButton">
							<span data-l10n-id="password_cancel">Cancel</span>
						</button>
						<button id="passwordSubmit" class="dialogButton">
							<span data-l10n-id="password_ok">OK</span>
						</button>
					</div>
				</dialog>
			</div>
			<!-- dialogContainer -->
		</div>
		<!-- outerContainer -->
		<input type="file" id="fileInput" accept="application/pdf" class="hidden" />
	</body>
</html>
